<template>
    <div class="main el-mg-20">
        <el-row :gutter="20">
            <!-- 注册用户 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>注册总数</p>
                    <div>
                        <img src="@/assets/tab-icon-1.png" alt="" />
                        <span>{{ sys.tab.totalUser }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 文章总数 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>文章总数</p>
                    <div>
                        <img src="@/assets/tab-icon-2.png" alt="" />
                        <span>{{ sys.tab.totalArticle }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 已发布文章 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>已发布文章</p>
                    <div>
                        <img src="@/assets/tab-icon-3.png" alt="" />
                        <span>{{ sys.tab.totalRelease }}</span>
                    </div>
                </div>
            </el-col>
            <!-- 阅读总数 -->
            <el-col :md="24" :lg="6">
                <div class="box el-box-init el-bkgd-white">
                    <p>阅读总数</p>
                    <div>
                        <img src="@/assets/tab-icon-4.png" alt="" />
                        <span>{{ sys.tab.totalReading }}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="chart-box">
            <div id="chart"></div>
        </div>
    </div>
</template>


<script>
import { adminHome as Api } from "api";
import * as echarts from "echarts";

export default {
    data() {
        return {
            count: 7, // 图表展示天数

            sys: {
                tab: {
                    totalUser: 0, // 用户总数
                    totalArticle: 0, // 文章总数
                    totalRelease: 0, // 发布总数
                    totalReading: 0, // 阅读总数
                },
                days: [],
                talkData: [],
                commentData: [],
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            const { code, msg, data } = await this.$axios.get(Api.getList, {
                params: { count: this.count },
            });

            if (code == 200) {
                this.sys = {
                    tab: {
                        totalUser: data.sys.tab.totalUser,
                        totalArticle: data.sys.tab.totalArticle,
                        totalRelease: data.sys.tab.totalRelease,
                        totalReading: data.sys.tab.totalReading,
                    },
                };

                this.drawChart(data);
            }
        },
        drawChart(data) {
            let chartDom = document.getElementById("chart");
            let myChart = echarts.init(chartDom, "dark");
            let option;

            option = {
                title: {
                    text: `近${this.count}日博客信息`,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: ["发布文章", "留言", "评论"],
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    // boundaryGap: false,
                    data: data.sys.days,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "发布文章",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        data: data.sys.pushArticleData,
                    },
                    {
                        name: "留言",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        data: data.sys.talkData,
                    },
                    {
                        name: "评论",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        data: data.sys.commentData,
                    },
                ],
            };

            option && myChart.setOption(option);

            window.onresize = function () {
                myChart.resize();
            };
        },
    },
};
</script>

<style lang="less" scoped>
.box {
    p {
        color: #606266;
        border-bottom: 1px solid #ebeef5;
        padding: 10px;
        margin-bottom: 10px;
    }
    div {
        display: flex;
        align-items: center;
        padding: 0 10px 10px 10px;
        img {
            width: 50px;
        }
        span {
            font-size: 36px;
            margin-left: 10px;
            color: #606266;
        }
    }
}
.chart-box {
    width: 100%;
    margin: 10% auto;
    #chart {
        height: 500px;
    }
}
</style>